import Vue from 'vue'
import VueRouter from 'vue-router'
import DashBoard from '@/components/DashBoard.vue'
import NProgress from 'nprogress'
Vue.use(VueRouter)

const routes = [
	{
		path: '/login',
		component: () => import('@/components/Login.vue'),
	},
	{
		// user/123 user/456 => user/:userId
		/* 动态参数的匹配 */
		path: '/user/:userId',
		component: () => import('@/components/User.vue'),
		meta: {
			name: '动态参数',
		},
		// 路由独享的导航守卫
		beforeEnter: (to, from, next) => {
			console.log('进入到 /user/:userId 所在路由的地方')
			next()
		},
	},
	// /dashboard => DashBoard.vue 组件渲染出来
	{
		path: '/dashboard',
		component: DashBoard,
		name: 'Dashboard',
		children: [
			{
				path: '',
				component: () => import('@/components/Home.vue'),
			},
			{
				path: 'userlist',
				component: () => import('@/components/UserList.vue'),
			},
			{
				path: 'shoplist',
				component: () => import('@/components/ShopList.vue'),
			},
		],
	},
	{
		path: '/404',
		component: () => import('@/components/PageNotFound.vue'),
	},
	{
		path: '/',
		component: () => import('@/components/HelloWorld.vue'),
	},
	// {
	// 	path: '*',
	// 	redirect: '/404',
	// },
]

const router = new VueRouter({
	routes,
	// mode: 'history',
})
// let authorized = false // 通常是用户登录成功之后的一个标志位，true
let authorized = true // 通常是用户登录成功之后的一个标志位，true
// 表示登录成功，就可以跳转到有授权页面；如果没有的话，回到登录页面
// 注册一个全局的前置的导航守卫
router.beforeEach((to, from, next) => {
	console.log('全局的前置的导航守卫执行了')
	console.log('from:', from)
	console.log('to:', to)
	// next() // 如果没有执行的话，导航被中断了，导航不过去
	// next('/404')
	// 权限判断
	// next(false) // 中断当前的导航
	// next(new Error('错误发生了')) // 中断当前的导航
	// 开始进度条
	NProgress.start()
	if (to.path != '/login' && !authorized) {
		next('/login') //用户没有登录，并且跳转的路径不是login情况下
	} else {
		next()
	}
})

// 全局的后置的导航守卫
router.afterEach((to, from) => {
	NProgress.done()
	// 你也可以注册全局后置钩子，然而和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身：
	console.log('全局后置的导航守卫结束了')
	console.log('from：', from)
	console.log('to：', to)
})
export default router
